<template>
  <div class="AgencyDetails">
    <Box>
      <div slot="box">
        <h2>{{ this.$route.query.name }}</h2>
        <div>
          <div>
            <span>机构类型：{{ this.filterMultiDictText('mechanism_type',this.$route.query.type) }}</span>
            &emsp;&emsp;&emsp;
            <span>机构层级：{{ this.filterMultiDictText('level',this.$route.query.level) }}</span>
          </div>
        </div>
      </div>
    </Box>
    <Box>
      <h3 slot="title" style="margin: 10px 15px">综治队伍</h3>
      <div slot="box">
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="list"
          :showSelection="true"
          :showPagination="true"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="action" slot-scope="text, record">
            <a style="padding: 0 5px" @click="showModal(record)">查看</a>
          </template>
        </CustomTable>
      </div>
    </Box>
    <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <a-descriptions :title="this.detailed.name" :size="size" :column="1">
          <a-descriptions-item label="机构名称">
            {{ this.detailed.mechanismName }}
          </a-descriptions-item>
          <a-descriptions-item label="性别">
            {{ this.filterMultiDictText('sex',this.detailed.sex) }}
          </a-descriptions-item>
          <a-descriptions-item label="民族">
            {{ this.filterMultiDictText('nation',this.detailed.nation) }}
            <!--          {{this.detailed.nation}}-->
          </a-descriptions-item>
          <a-descriptions-item label="政治面貌">
            {{ this.filterMultiDictText('political_outlook',this.detailed.politicalOutlook) }}
            <!--          {{this.detailed.politicalOutlook}}-->
          </a-descriptions-item>
          <a-descriptions-item label="公民身份号码">
            {{ this.detailed.identityCard }}
          </a-descriptions-item>
          <a-descriptions-item label="出生日期">
            {{ this.detailed.birthday }}
          </a-descriptions-item>
          <a-descriptions-item label="级别">
            {{ this.filterMultiDictText('personnel_level',this.detailed.level) }}
            <!--          {{this.detailed.level}}-->
          </a-descriptions-item>
          <a-descriptions-item label="职务">
            {{ this.filterMultiDictText('duties',this.detailed.duties) }}
            <!--          {{this.detailed.duties}}-->
          </a-descriptions-item>
          <a-descriptions-item label="专业特长">
            {{ this.detailed.majorSpecialty }}
          </a-descriptions-item>
          <a-descriptions-item label="学历">
            {{ this.filterMultiDictText('education',this.detailed.education) }}
            <!--          {{this.detailed.education}}-->
          </a-descriptions-item>
          <a-descriptions-item label="手机号码">
            {{ this.detailed.phoneNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="固定电话">
            {{ this.detailed.fixedPhone }}
          </a-descriptions-item>
        </a-descriptions>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { getDictItemsFromCache } from '@api/api'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { getAgencyDetails, institution } from '@/api/xlgc/ComprehensiveBusiness'
export default {
  name: 'AgencyDetails',
  data() {
    return {
      detailed: {},
      size: 'default',
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) =>
            `${(this.pageFilter.index - 1) * this.pageFilter.size + (index + 1)}` // 序号分页后连续
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'

        },
        {
          title: '性别',
          dataIndex: 'sex',
          key: 'sex',
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('sex', text)
          }
        },
        {
          title: '公民身份号码',
          key: 'identityCard',
          dataIndex: 'identityCard'
        },
        {
          title: '级别',
          key: 'level',
          dataIndex: 'level',
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('personnel_level', text)
          }
        },
        {
          title: '职务',
          key: 'duties',
          dataIndex: 'duties',
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('duties', text)
          }
        },
        {
          title: '手机号',
          key: 'phoneNumber',
          dataIndex: 'phoneNumber'
        },
        {
          title: '操作',
          key: 'action',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      list: [],
      loading: false,
      pageFilter: {
        index: 1,
        size: 10
      }
    }
  },
  components: { Box, CustomTable },
  mounted() {
    let data = {
      mechanismName: this.$route.query.name
    }
    this.AgencyDetails(Object.assign({}, data, this.pageFilter))
  },
  methods: {
    skip(val) {
      this.visible = true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'index' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      let data = {
        mechanismName: this.$route.query.name
      }
      this.AgencyDetails(Object.assign({}, data, this.pageFilter))
    },
    showModal(val) {
      this.detailed = val
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    AgencyDetails(val) {
      let lists = []
      return new Promise((resolve, reject) => {
        this.loading = true
        getAgencyDetails(val).then(response => {
          console.log(response)
          this.list = response.result
          this.loading = false
          resolve(response)
          console.log(response)
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>
/deep/.ant-modal-footer{
  display: none !important;
}
</style>
